import { Form, Input, Button, message } from "antd";
import { RegisterDto } from "../../apis";
import { useUserStore } from "../../store/user";
import { useForm } from "antd/es/form/Form";
import { useState } from "react";
import { useCountdown } from "../../hooks/useCoundown";

const layout1 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 20 },
};

const layout2 = {
  labelCol: { span: 0 },
  wrapperCol: { span: 24 },
};

export function Register() {
  const [form] = useForm();
  const { countdown, isCounting, startCountdown } = useCountdown();

  const userStore = useUserStore();
  const [isLoading, setIsLoading] = useState(false);

  const sendCaptcha = async () => {
    // 1. 判断邮箱是否填写
    const email = form.getFieldValue("email");
    if (!email) {
      message.error("请输入邮箱");
      return;
    }
    // 2. 验证邮箱格式
    form.validateFields(["email"]).catch(() => {
      message.error("请输入正确的邮箱格式");
    });

    // 2. 发送验证码
    const [success] = await userStore.sendRegisterCaptcha({ email });
    if (success) {
      message.success("验证码已发送");
    }

    startCountdown(30);
  };

  const onFnish = async (values: RegisterDto & { confirmPassword: string }) => {
    if (values.password !== values.confirmPassword) {
      message.error("两次密码不一致");
      return;
    }
    setIsLoading(true);
    await userStore.register(values);
    setIsLoading(false);
  };

  return (
    <div className="flex justify-center items-center h-svh">
      <div className="w-[500px] rounded-md p-10 shadow-md bg-white">
        <h2 className="text-2xl text-center mb-10 font-bold">聊天室</h2>
        <Form
          form={form}
          {...layout1}
          onFinish={onFnish}
          colon={false}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="昵称"
            name="nickName"
            rules={[{ required: true, message: "请输入昵称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirmPassword"
            rules={[{ required: true, message: "请输入确认密码" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: "请输入邮箱" },
              { type: "email", message: "请输入合法邮箱地址!" },
            ]}
          >
            <Input />
          </Form.Item>
          <div className="flex items-center md:items-start">
            <Form.Item
              label="验证码"
              name="captcha"
              rules={[{ required: true, message: "请输入验证码" }]}
              labelCol={{ span: 7 }}
              className="flex-1"
            >
              <Input />
            </Form.Item>
            <Button
              type="primary"
              className="ml-2 mt-4 md:mt-0"
              disabled={isCounting}
              onClick={sendCaptcha}
            >
              {isCounting ? `${countdown}秒后重试` : "发送验证码"}
            </Button>
          </div>
          <Form.Item {...layout2}>
            <div className="flex w-full ">
              已有账号？去
              <a className="text-blue-500" href="/login">
                登录
              </a>
            </div>
          </Form.Item>
          <Form.Item {...layout2}>
            <Button
              className="w-full h-[40px]"
              type="primary"
              htmlType="submit"
              disabled={isLoading}
            >
              创建账号
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
